<template>
  <div class="supplier-list-wrap">
    <PageTop firstMenu="商品分类" secondMenu="商品管理" title="商品分类" @add-thing="add"></PageTop>

    <el-select class="bottom-margin" clearable size="small" v-model="status" placeholder="选择供应价格设置">
      <el-option v-for="item in statuses" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <div class="search-container">
      <el-input size="small" class="search" clearable v-model="keyword" placeholder="输入标题关键字搜索"></el-input>
      <el-button plain size="small" type="primary" @click="getData">查询</el-button>
    </div>
    <tableList :tableData="listData" @getData="getData"></tableList>
    <el-pagination class="page-count" @current-change="pageChange" background layout="total, prev, pager, next" :total="totalCount" :current-page.sync='page' :page-size="10"></el-pagination>

    
      <childTable v-show="showChild" @confirm="addTable" @close="closeChild"></childTable>
      
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop, Component, Emit } from 'vue-property-decorator';
import PageTop from '@/components/pageTop.vue';
import tableList from '@/tables/supplier/supplierSup.vue';
import AjaxResquest from '@/api/apiRequest';
import childTable from '@/tables/supplier/supplierSupChild.vue';

@Component({
  components: {
    PageTop,
    tableList,
    childTable
  }
})
export default class AccessList extends Vue {
  categoryRes!: AjaxResquest;
  addRes!: AjaxResquest;
  listData: any[] = [];
  page: number = 1;
  pageSize: number = 20;
  totalCount: number = 0;
  keyword: string = '';
  ajaxData = {
    page: this.page,
    pageSize: this.pageSize
  };
  statuses: any[] = [
    { value: '1', label: '已设置' },
    { value: '2', label: '未设置' }
  ];
  status: string = '';
  showChild: boolean = false;
  $route!: any;
  id!: any;
  mounted() {
    this.id = this.$route.query.row.id;
    console.log(this.id);
    this.categoryRes = new AjaxResquest('/purchase/suppliersForList');
    this.addRes = new AjaxResquest('/purchase/addSuppliersFor');
    this.getData();
    console.log(this.$route.query);
  }
  // getList(): void {
  //   this.categoryRes.getFunction(this.ajaxData).then((res:any) => {
  //     if (res.data.code === 1) {
  //       this.listData = res.data.data.types;
  //       this.totalCount = res.data.data.allCount;
  //     }
  //   });
  // }
  pageChange(val: number): void {
    // this.$set(this.ajaxData, 'page', val);
    // this.categoryRes.getFunction(this.ajaxData);
    this.getData();
  }
  getData() {
    let data = {
      page: this.page,
      pageSize: this.pageSize,
      keyWord: this.keyword,
      status: this.status,
      suppliersId: this.id
    };
    this.categoryRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.listData = res.data.data.types;
        this.totalCount = res.data.data.allCount;
      }
    });
  }
  add() {
    this.showChild = true;
  }
  addTable(val: any) {
    console.log(val);

    let temp = val;
    let tempData: any[] = [];
    temp.map((i: any) => {
      i._models_id.map((j: any) => {
        let count!: number;
        let name!: string;
        let fId!: string;
        i.format_info[0].forEach((e: any) => {
          if (e.format_id === j) {
            name = e.format_name;
            fId = e.format_id;
          }
        });
        // let data = {
        //   id: i.id,
        //   material_name: i.material_name,
        //   number: i.number,
        //   unit: i.unit,
        //   format_name: name,
        //   format_id: fId,
        //   tableRemark: '',
        //   outCount: 0
        // };
        // tempData.push(data);
      });
      let data: any = {
        materials_id: i.id,
        format_id: i._models_id
      };
      tempData.push(data);
    });
    let postData: any = JSON.stringify([
      { suppliersId: this.id, data: tempData }
    ]);
    this.addRes
      .getFunction({ suppliersId: this.id, data: JSON.stringify(tempData) })
      .then((res: any) => {
        if (res.data.code === 1) {
          this.showChild = false;
          this.getData();
          console.log(res);
        }
      });
    console.log(tempData);

    // this.tableData = [this.tableData, ...tempData];
    // console.log(this.tableData);
    // this.showChild = false;
  }
  closeChild() {
    this.showChild = false;
  }
}
</script>
<style lang="less">
.supplier-list-wrap {
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  text-align: left;
  .page-count-wrap {
    position: absolute;
    bottom: 25px;
    right: 25px;
  }
  .search-container {
    // display: flex;
    text-align: left;
    height: 32px;
    margin: 0px 10px 15px 0;
    .search {
      width: 250px;
      margin-right: 10px;
    }
  }
  .bottom-margin {
    margin-bottom: 15px;
  }
}
</style>
